<template>
  <el-tabs :tab-position="tabPosition" class="process-info">
    <el-tab-pane
      v-for="unit in unitList"
      :key="unit.unitId"
      :label="unit.unitForShort"
    >
      <el-scrollbar max-height="50vh">
        <div class="mr-4">
          <ProcessPane :unit-id="unit.unitId" :matter-id="matterId" />
        </div>
      </el-scrollbar>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue'
import type { TabsInstance } from 'element-plus'
import ProcessPane from './ProcessPane.vue'
import { getUnitByMatterId } from '@/api/mission/process'

const { matterId } = defineProps<{
  matterId: number
}>()

const tabPosition = ref<TabsInstance['tabPosition']>('left')
const unitList = ref([])

defineExpose({ setDeadlineDate })

function setDeadlineDate(dateStr: string) {
  nextTick(() => {
    const dom = document.getElementById('deadline-' + dateStr)
    if (dom) {
      dom.scrollIntoView()
    }
  })
}

async function getProcessUnitList() {
  const { data } = await getUnitByMatterId(matterId)
  if (data.status === 200) {
    unitList.value = data.data
  }
}

onMounted(async () => {
  await getProcessUnitList()
})
</script>

<style lang="scss">
.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>
